<template>
  <div>
    <div class="table-tool" v-if="finalShowToolbar">
      <slot name="header"></slot>
    </div>
    <el-table
      header-cell-class-name="table-header"
      ref="dataTableRef"
      size="small"
      tooltip-effect="dark"
      row-key="id"
      :data="dataList"
      border
    >
      <el-table-column type="selection" width="50" align="center" v-if="config.showCheckbox" fixed />
      <el-table-column v-bind="column" v-for="column in config.tableColumns" :key="column.label" show-overflow-tooltip>
        <template #default="scope">
          <slot :name="column.slot" :row="scope.row">
            {{ scope.row[column.prop] }}
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="table-pagination"
      :current-page="pagination.currentPage"
      @update:currentPage="handleCurrentChange"
      :page-size="pagination.pageSize"
      @update:pageSize="handleSizeChange"
      :layout="finalPaginationConfig.layout"
      :page-sizes="finalPaginationConfig.pageSizes"
      :total="dataCount"
      background
      v-if="config.showPagination"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { PaginationConfig, PaginationData, TableConfig } from './types'

export default defineComponent({
  name: 'DataTable',
  props: {
    config: {
      type: Object as PropType<TableConfig>,
      default: () => ({})
    },
    dataList: {
      type: Array,
      required: true
    },
    dataCount: {
      type: Number,
      default: 0
    },
    pagination: {
      type: Object as PropType<PaginationData>,
      default: () => ({ currentPage: 1, pageSize: 10 })
    },
    showToolbar: {
      type: Boolean,
      default: undefined
    }
  },
  emits: ['currentChange', 'sizeChange'],
  setup(props, { emit }) {
    // 工具栏
    const finalShowToolbar = computed(() => props.showToolbar ?? props.config.showToolbar)

    // 合并分页配置
    const defaultPaginationConfg: PaginationConfig = {
      pageSizes: [10, 20, 30, 50, 100],
      layout: 'total, sizes, prev, pager, next, jumper'
    }
    const finalPaginationConfig = { ...defaultPaginationConfg, ...props.config.paginationConfig }

    // 转发事件：current-change
    const handleCurrentChange = (value: number) => {
      emit('currentChange', value)
    }

    // 转发事件：size-change
    const handleSizeChange = (value: number) => {
      emit('sizeChange', value)
    }

    return { finalShowToolbar, finalPaginationConfig, handleCurrentChange, handleSizeChange }
  }
})
</script>

<style lang="less" scoped>
@headerBackgroundColor: #f5f7fa;
.table-tool {
  display: flex;
  padding: 10px 15px;
  border-top: #ebeef5 1px solid;
  border-right: #ebeef5 1px solid;
  border-left: #ebeef5 1px solid;
  background-color: @headerBackgroundColor;
}

.el-table :deep {
  .table-header {
    height: 41px;
    color: #606266;
    background-color: @headerBackgroundColor !important;
  }
  .cell {
    .el-checkbox {
      height: 28px;
    }
  }
}

.table-pagination {
  margin-top: 15px;
}

.el-pagination :deep {
  .btn-prev,
  .btn-next {
    .el-icon {
      width: inherit;
    }
  }
}
</style>
